@bgColor:black;

html{
    background-color: @bgColor;
}

.wrapper{
    width: 400px;
    height: 400px;
    position: relative;
    transform-origin: bottom center;
    transform: rotate(-45deg); 
    // margin: 0 auto;
    // background-color: #ccc;
    margin-left: 600px;
}

.box{
    height: 200px;
    width: 200px;
    /* margin-top: 200px; */
    /* margin-left: 200px; */
    /* border-radius: 0px 100%  0 100%; */
    /* border-radius: 100% 0 100% 0; */
    border-radius: 100% 0;
    background-color: pink;
    transform-origin: bottom left;
    
    /* transform: rotate(45deg); */
    position: absolute;
    /* top: 50%; */
    transition: all 2s;
    /* animation: donghua 2s linear infinite; */
}


// .myLoop(@index) when (@index >0){
//     .wrapper:hover .box:nth-of-type(@{index}){
//         transition: all 2s;
//         transform: rotate( 30deg);
//     }
//     .myLoop(@index -1);
// }

// .myLoop( 5 );


.myLoop2( @index ) when ( @index <= 7 ){
    .wrapper:hover .box:nth-of-type(@{index}){
        transition: all 2s;
        transform: rotate( @index *30deg - 120deg );
        opacity: 0.3;
    }

    .myLoop2( @index + 1 );
}

.myLoop2( 1 );
